<template>
  <div class="my">
    <header>
      <h2>我的</h2>
      <dl>
        <dt>
            <!-- <img v-lazy="img.src" :key="img.src" > -->
          <img :src="img" alt />
        </dt>
        <dd>
          <p>
            <span>{{name}}</span>
          </p>
          <!-- <p>{{username}}</p> -->
        </dd>
      </dl>
    </header>
    <main>
      <van-cell is-link title="支付明细" @click="show = true" />
      <van-cell is-link title="问题反馈" @click="show = true" />
      <van-cell is-link title="联系客服" @click="show = true" />
    </main>
  </div>
</template>

<script>
import axios from "axios";
import { log } from "util";

export default {
  data() {
    return {
      name: sessionStorage.getItem("name"),
      img: sessionStorage.getItem("img")
      // username: sessionStorage.getItem("username")
    };
  }
};
</script>

<style lang="scss" scoped>
.my {
  width: 100%;
  height: 100%;
  header {
    height: 160px;
    background-color: rgb(35, 152, 206);
    border-bottom: 1px solid rgb(145, 145, 145);
    h2 {
      text-align: center;
    }
    dl {
      margin: 70px auto;
      height: 120px;
      width: 85%;
      border: 1px solid rgb(163, 161, 161);
      display: flex;
      align-items: center;
      background-color: #fff;
      border-radius: 30px;
      justify-content: space-evenly;
      dt {
        img {
          border-radius: 100px;
          width: 100px;
          height: 100px;
        }
        img[lazy="loading"] {
          display: block;
          width: 50px !important;
          height: 50px !important;
          margin: 0 auto;
        }
      }
      dd {
        p {
          font-weight: bold;
        }
      }
    }
  }
  main {
    margin-top: 70px;
  }
}
</style>